<template>
    <BoxTitle class="age">
        <template #title>
            <p>年龄比例</p>
        </template>
        <template #content>
            <div class="charts" ref="charts"></div>
        </template>
    </BoxTitle>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import BoxTitle from './slot/boxtitle.vue';
let charts = ref()
onMounted(() => {
    let mychart = echarts.init(charts.value);
    let option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '20%',
            // left: 'center',
            right: 20,
            orient: 'vertical',
            textStyle:{
                color: '#fff',
                fontSize: '12px'
            }
        },
        series: [
            {
                name: 'Age From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                },
                label: {
                    show: true,
                    position: 'inside'
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 16, name: '10岁以下' },
                    { value: 8, name: '10-18岁' },
                    { value: 12, name: '18-30岁' },
                    { value: 24, name: '30-40岁' },
                    { value: 20, name: '40-60岁' },
                    { value: 20, name: '60岁以上' }
                ]
            }
        ],
    };
    mychart.setOption(option)
})
</script>

<style scoped lang="scss">
.age {
    flex: 1;
}

.charts {
    height: 260px;
}
</style>